<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style type="text/css">
        .main-content{
            padding: 15px;
        }
        @media screen and (max-width: 768px) {
            .layui-layout-admin .layui-layout-left,
            .layui-layout-admin .layui-body,
            .layui-layout-admin .layui-footer {
                left: 0;
            }
            .layui-layout-admin .layui-side {
                left: -300px;
            }
        }
    </style>
    <script src="/layui/layui.js"></script>
    <script src="/js/template.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">HkProxy</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">userName</a>
                <dl class="layui-nav-child">
                    <dd><a href="">login out</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->

        </div>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll"></div>
    </div>


    <div class="layui-body">
    </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
    </div>
</div>
</body>
<script>
    var form = layui.form, layer = layui.layer;
    let menus = null;
    $ = layui.jquery;
    layui.config({
        base: '/js/' //你存放新模块的目录，注意，不是 layui 的模块目录
    }).use('index'); //加载入口
    function initMenu(){
        get("/menus",function(res) {
            console.log(res.data)
            menus = res.data;
            var html = template($("#menu-tpl").html(), {
                list : res.data
            });
            $(".layui-side-scroll").html(html);
            layui.use('element', function() {
                layui.element.init();
            });
        })
    }
    initMenu();
    function get(url,callback){
        $.ajax({
            type:"GET",
            url: "/menus",
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", sessionStorage.getItem("Authorization"));
            },
            success: function (data) {
                if(data.code==200){
                    callback(data);
                }else if(data.code==10001){
                    window.location.href = "/index.html";
                }
            }
        })
    }
    function post(uri, params, callBack) {
        $.ajax({
            url: uri,
            data: JSON.stringify(params),
            type: "POST",
            cache: false,
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", sessionStorage.getItem("Authorization"));
            },
            success: function (data) {
                callBack(data);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                if ("undefined" == typeof (XMLHttpRequest.responseJSON)) {
                    layer.alert("System error, please try again later.");
                    return;
                }
                if (10001 == XMLHttpRequest.responseJSON.code) {
                    location.href = "/";
                } else {
                    layer.alert(XMLHttpRequest.responseJSON.message);
                    api_invoke("/config/detail", {}, function (data) {
                        clientList = data.data;
                    });
                }
            }
        })
    }
    function load_page(pageUrl) {
        $(".layui-body").load(pageUrl);
        layui.element.init();
    }

    layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$;
        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            , menuRight: function () {
                layer.open({
                    type: 1
                    , title: '更多'
                    , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    , area: ['260px', '100%']
                    , offset: 'rt' //右上角
                    , anim: 5
                    , shadeClose: true
                    , scrollbar: false
                });
            }
        });
    });
</script>
<script id="menu-tpl" type="text/html">
    <ul class="layui-nav layui-nav-tree sys-menu">
        <%for(var i in list){%>
        <li class="layui-nav-item">
            <a class="" href="javascript:;"><%=list[i].menuName%></a>
            <%for(var j in list[i].childrenList){%>
            <dl class="layui-nav-child">
                <dd><a href="javascript: load_page('<%=list[i].childrenList[j].path%>');" class="menu-item" data-index="<%:=j%>"><%=list[i].childrenList[j].menuName%></a><span class="layui-nav-more"></span></dd>
            </dl>
            <%}%>
        </li>
        <%}%>
    </ul>
</script>
</html>